<!DOCTYPE html>
<html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  
<section id="inner-headline">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<ul class="breadcrumb">
					<li><a href="<c:url value="/"/>"><i class="fa fa-home"></i></a><i class="icon-angle-right"></i></li>
					<li class="active">Simulação</li>
				</ul>
			</div>
		</div>
	</div>
</section>


<section id="content">
	<div class="container-fluid">
	    <div class="row">
	        <div role="main" class="col-md-4">
	        	<sf:form modelAttribute="simulacao" id="formSimulacao">
	            	
	            	<c:if test="${not empty mensagem.msgInformacao}" >
						<div class="alert alert-info">
						  <button type="button" class="close" data-dismiss="alert">×</button>
						  <h4>Atenção!</h4>
						  ${mensagem.msgInformacao}
						</div>
					</c:if>
	                <fieldset>
	                    <fieldset>
	                    	<div class="input-group margin-bottom-sm">
	                    		<span class="input-group-addon" style="width: 45px;">
									<img src="<c:url value="/recursos/img/maps/darkgreen_MarkerA.png"/>">
								</span>
	                    		<input class="form-control" type="text" name="txtEnderecoPartida" 	id="txtEnderecoPartida" 	placeholder="Endereço de partida *" onfocus="localizaEnderecoPartida()">
								<input class="form-control" type="text" name="txtNumeroPartida" 	id="txtNumeroPartida"  		placeholder="Número *" style="width: 126px;">
								<input class="form-control" type="text" name="txtComplementoPartida"id="txtComplementoPartida" 	placeholder="Complemento">
								<input class="form-control" type="text" name="txtDescricaoPartida" 	id="txtDescricaoPartida" 	placeholder="O que fazer? Com quem falar?">
							</div>
	                    </fieldset>
	                    <br>
	                    <fieldset>
	                    	<div class="input-group margin-bottom-sm">
	                    		<span class="input-group-addon" style="width: 45px;">
									<img src="<c:url value="/recursos/img/maps/red_MarkerB.png"/>">
								</span>
								<input class="form-control" type="text" name="txtEnderecoChegada" 	id="txtEnderecoChegada" 	placeholder="Endereço de chegada *" onfocus="localizaEnderecoChegada()">
								<input class="form-control" type="text" name="txtNumeroChegada" 	id="txtNumeroChegada"  		placeholder="Número *" style="width: 126px;">
								<input class="form-control" type="text" name="txtComplementoChegada"id="txtComplementoChegada" 	placeholder="Complemento">
								<input class="form-control" type="text" name="txtDescricaoChegada" 	id="txtDescricaoChegada" 	placeholder="O que fazer? Com quem falar?">
							</div>
	                    </fieldset>
						<br/>
	                    <fieldset class="smmb-border">
							<div class="radio">
								<label><input type="radio" name="optradio" checked="checked"><span class="fa fa-motorcycle fa-5"></span>&nbsp;Motoboy</label>
								<label><input type="radio" name="optradio"><span class="fa fa-truck fa-5"></span>&nbsp;Carro</label>
							</div>
							<div class="checkbox">
								<label><input type="checkbox" value="" id="incluirVolta">Incluir Volta</label>
							</div>
							<div>
		                    	<div class="col-md-4">
		                    		<span class="label label-default">Término:</span>
		                    	</div>
		                    	<div class="col-md-4">
		                    		<span class="label label-success">Valor:</span>
		                    	</div>
		                    	<div class="col-md-4">
		                    		<span class="label label-info">Distância:</span>
		                    	</div>
	                    	</div>
	                    	<div>
		                    	<div class="col-md-4">
		                    		<h4 id="termino">-</h4>
		                    	</div>
		                    	<div class="col-md-4">
		                    		<h4 id="valor">-</h4>
		                    	</div>
		                    	<div class="col-md-4">
		                    		<h4 id="distancia">-</h4>
		                    	</div>
	                    	</div>
	                    	<br/><br/>
	                    	<div class="col-md-12 btn-group">
		                    	<div class="text-center">
			                    	<input type="button" id="simulado" value="Calcula Corrida"
										class="btn btn-success col-md-5" onclick="calculaCorrida();">	
										
						        	<input type="button" id="solicitarEntrega" value="Solicitar Entrega"
										class="btn btn-primary col-md-5" onclick="calculaCorrida();">
								</div>
	                    	</div>
	                    </fieldset>
					</fieldset>
				</sf:form>
	        </div>
	        <aside role="complementary" class="col-md-8" style="height: 600px">
			    <div id="mapa-simulado"></div>
	        </aside>
	    </div>
	</div>
</section>
<script>initialize();</script>